<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="../components/jquery1.42.min.js"></script>
		<script src="../components/echarts-4.0.4.min.js"></script>
		<style>
			html,body{
				width: 100%;
				height: 100%;
				background:#0A0F23;
			}
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<div id="main" style="width: 100%;height: 100%;"></div>
	</body>
	<script>
		var myChart = echarts.init(document.getElementById('main'));
		var titles = ['西安巨川国际投资有限公司',
			'西安创新技术投资担保有限公司',
			'西北大学',
			'西安昌泰化工厂',
			'西安长庆石油科技有限责任公司',
			'陕西隆源电能科技有限公司',
			'西安快通科技有限公司',
			'陕西微康姆通信技术有限公司',
			'西安琦威科技有限责任公司',
			'西安宇杰表面工程有限公司',
			'气相色谱质谱',
			'小型电子计算机',
			'定量仪',
			'激光共聚焦扫描显微镜',
			'激光显微捕获系统',
			'流式细胞仪',
			'人体三维运动测试系统',
			'神经电生理检测系统',
			'生理电位测试系统',
			'超高速摄影系统',
			'毛细液相质谱联用仪',
			'飞行时间质谱仪',
			'单细胞膜片钳',
			'生理诊断仪',
			'服务器',
			'飞秒光学参量放大系统',
			'准分子气体激光器',
			'扫描探针显微系统',
			'龚心谷',
			'杨宝臣',
			'姜玉琴',
			'郭崇华',
			'郭思景',
			'孙悦迎',
			'汤发良'];
		myChart.showLoading();
		$.get('../json/webkit-dep.json', function (webkitDep) {
		    myChart.hideLoading();
		
		    option = {
		    	backgroundColor: "#0A0F23",
		        legend: {
					left: 'center',
		        	bottom:'5%',
		            data: ['人才', '技术', '设备', '专利', '政策','资本'],
			        textStyle: {
						color: '#fff',
						fontSize:16
					}
		        },
		        color:['#e79b31','#5eb69d','#66499b','#d5595d','#318eb7','#586b7a','#67c47b'],
		        series: [{
		            type: 'graph',
		            layout: 'force',
		            animation: false,
		            label: {
		                normal: {
		                	show:false,
		                    position: 'right',
		                    formatter: '{b}',
		                    color:'#FFF',
		                    fontSize:16
		                }
		            },
		            draggable: true,
		            data: webkitDep.nodes.map(function (node, idx) {
		                node.id = idx;
		                if(idx%5 == 0){
		                	node.label = {
		                	    show:true,
								formatter: titles[idx%35],
								color:'#FFF',
								fontSize: 16,
                                align: 'center',
                                verticalAlign: 'middle',
                                shadowBlur: 10,
                                position: 'insideRight',
                                distance: 10
		                	};
                            node.symbolSize = 30;
		                } else {
                            node.symbolSize = 10 + (idx%5);
						}
		                return node;
		            }),
		            categories: webkitDep.categories,
		            force: {
		                // initLayout: 'circular'
		                // repulsion: 20,
		                edgeLength: 6,
		                repulsion: 40,
		                gravity: 0.2
		            },
		            edges: webkitDep.links
		        }]
		    };
		
		    myChart.setOption(option);
		});
		
		
	</script>

</html>